{% extends "layout-remote.html" %}
{% set active_page = "setup" %}

{% block title %} - Remote Admin Setup{% endblock %}

{% block head %}
{% endblock %}

{%- block body %}
  <!-- Route: /remote/setup -->
  <div class="container">
    {% include 'flash_messages.html' %}

    <div style="padding-bottom: 2em">
      Add remote Mycodo hosts to control and view data
    </div>
    <div style="padding-bottom: 2em">
      The user must be in the <i>Admin</i> group of the remote Mycodo host you are adding (Admin/Configuration/User menu). Ensure port 443 (HTTPS) is open and reachable on the remote host. Check your router settings to enable port forwarding if trying to communicate over a non-local network. After adding the host, a status icon will appear next to the new host entry to indicate if it is accessible.
    </div>

    <form method="post" action="/remote/setup">
      <input type="hidden" name="form-name" value="add_remote">
      {{form_setup.csrf_token}}

    <div class="form-row align-items-end">
      <div class="col-auto">
        {{form_setup.host.label(class_='control-label')}}
        <div>
          {{form_setup.host(class_='form-control')}}
        </div>
      </div>
      <div class="col-auto">
        {{form_setup.username.label(class_='control-label')}}
        <div>
          {{form_setup.username(class_='form-control')}}
        </div>
      </div>
      <div class="col-auto">
        {{form_setup.password.label(class_='control-label')}}
        <div>
          {{form_setup.password(class_='form-control')}}
        </div>
      </div>
      <div class="col-auto">
        {{form_setup.add(class_='form-control btn btn-primary btn-sm')}}
      </div>
    </div>

    </form>

    {% for each_host in remote_hosts %}
    <form method="post" action="/remote/setup">
      <input type="hidden" name="form-name" value="mod_remote">
      {{form_setup.csrf_token}}
      {{form_setup.remote_id(value=each_host.unique_id)}}

      <div class="form-row align-items-end" style="padding: 2em 0">
        <div class="col-2">
          <label class='control-label'>ID</label>
          <div>
            <input class="form-control" disabled="" value="{{each_host.id}}" type="text">
          </div>
        </div>
        <div class="col-auto">
          {{form_setup.host.label(class_='control-label')}}
          <div>
            {{form_setup.host(class_='form-control', value=each_host.host)}}
          </div>
        </div>
        <div class="col-auto">
          {{form_setup.username.label(class_='control-label')}}
          <div>
            {{form_setup.username(class_='form-control', value=each_host.username)}}
          </div>
        </div>
        <div class="col-auto">
          {{form_setup.password.label(class_='control-label')}}
          <div>
            {{form_setup.password(class_='form-control')}}
          </div>
        </div>
        <div class="col-auto">
          <label class='control-label'>{{_('Status')}}</label>
          <div class="text-center justify-content-center">
            {% if host_auth[each_host.host] == 'authenticated' %}
              <img src="/static/img/on.png" style="width: 30px">
            {% else %}
              <img src="/static/img/off.png" style="width: 30px">
            {% endif %}
          </div>
        </div>
        <div class="col-auto">
          {{form_setup.delete(class_='form-control btn btn-primary btn-sm')}}
        </div>
      </div>

      </form>
    {% endfor %}

  </div>

{% endblock -%}
